<template>
  <el-card style="margin-bottom: 10px">
    <!-- 操作 -->
    <vxe-toolbar v-if="isShowToolbar" ref="toolbarRef" size="mini" custom :refresh="{ query: handleRefresh }">
      <template #buttons>
        <slot name="toolbarButtons" />
      </template>
      <template #tools>
        <slot name="toolbarTools" />
      </template>
    </vxe-toolbar>
    <vxe-table
      ref="tableRef"
      class="my-table"
      border
      round
      auto-resize
      show-overflow
      :row-config="{
        isCurrent: true,
        keyField: 'Cid'
      }"
      size="mini"
      show-header-overflow="title"
      :column-config="{ resizable: true }"
      :checkbox-config="{ highlight: true }"
      v-bind="$attrs"
    >
      <!-- 插槽渲染表格列 -->
      <slot name="columns" />

      <!-- 插槽渲染操作列 -->
      <slot name="actionColumn" />
    </vxe-table>
    <vxe-pager
      v-if="isShowPager"
      :current-page="mergedPageConfig.currentPage"
      :page-size="mergedPageConfig.pageSize"
      :total="mergedPageConfig.total"
      :layouts="mergedPageConfig.layouts"
      @page-change="handlePageChange"
    />
  </el-card>
</template>
<script setup>
const toolbarRef = ref()
const tableRef = ref()

const defaultPageConfig = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0,
  layouts: ['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Total']
})
const props = defineProps({
  pageConfig: {
    type: Object,
    default: () => {}
  },
  isShowToolbar: {
    type: Boolean,
    default: true
  },
  isShowPager: {
    type: Boolean,
    default: true
  },
  handleRefresh: {
    type: Function,
    default: () => {}
  }
})

onMounted(() => {
  const $table = tableRef.value
  const $toolbar = toolbarRef.value
  if ($table && $toolbar) {
    $table.connect($toolbar)
  }
})

const mergedPageConfig = computed(() => ({
  ...defaultPageConfig,
  ...props.pageConfig
}))

const emit = defineEmits(['pageChange'])
const handlePageChange = page => {
  emit('pageChange', page)
}
</script>

<style lang="scss" scoped></style>
